<template>
  <div class="dashboard">
    <el-row :gutter="15">
      <el-col :xs="24" :lg="12">
        <div class="grid-content clearfix">
          <card-box
            title="待办事项"
            color="card-icon-blur"
            icon="icon-template_template"
            maxHeight="200px"
          >
            <div slot="card-right-btn">
              <span @click="showMoreInfo">更多 ></span>
            </div>
            <div slot="card-content">1</div>
          </card-box>
        </div>
      </el-col>
      <el-col :xs="24" :lg="12">
        <div class="grid-content clearfix">
          <card-box
            title="文件管理"
            color="card-icon-yellow"
            icon="icon-template_template"
            maxHeight="200px"
          >
            <div slot="card-right-btn">
              <span @click="showMoreInfo">更多 ></span>
            </div>
            <div slot="card-content">2</div>
          </card-box>
        </div>
      </el-col>
      <el-col :xs="24" :lg="12">
        <div class="grid-content clearfix">
          <card-box
            title="提醒"
            color="card-icon-red"
            icon="icon-template_template"
            maxHeight="200px"
          >
            <div slot="card-right-btn">
              <span @click="showMoreInfo">更多 ></span>
            </div>
            <div slot="card-content">3</div>
          </card-box>
        </div>
      </el-col>
      <el-col :xs="24" :lg="12">
        <div class="grid-content clearfix">
          <card-box
            title="超期数据"
            color="card-icon-green"
            icon="icon-template_template"
            maxHeight="200px"
          >
            <div slot="card-right-btn">
              <span @click="showMoreInfo">更多 ></span>
            </div>
            <div slot="card-content">4</div>
          </card-box>
        </div>
      </el-col>
    </el-row>
    <el-dialog
      v-el-drag-dialog
      :custom-class="'el-custom-dialog'"
      :visible.sync="dialogTableVisible"
      :close-on-click-modal="false"
      title="待办事项"
      @dragDialog="handleDrag"
    >
      <card-box
        title="待办事项"
        color="linear-gradient(60deg,#26c6da,#00acc1)"
        icon="icon-template_template"
        minHeight="350px"
      >
        <div slot="card-content" class="todolist">
          <todoList/>
        </div>
      </card-box>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import CardBox from "@/components/CardBox"
import todoList from "./todoList.vue"
import elDragDialog from "@/directive/el-dragDialog"; // base on element-ui
export default {
  name: "Dashboard",
  computed: {
    ...mapGetters(["name", "roles"])
  },
  components: { CardBox, todoList },
  directives: { elDragDialog },
  data () {
    return {
      dialogTableVisible: false, //控制dialog显隐
    }
  },
  methods: {
    showMoreInfo () {
      //展示弹层
      this.dialogTableVisible = true;
    },
    // 弹层拖拽回调，可处理dom
    handleDrag () {
      console.log('拖拽。。。')
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>
